<template>
  <view class="container">
    <view class="header-container">
      <!-- 返回按钮 -->
      <view class="return-btn" @click="goToHome" hover-class="none">
        <image src="/static/logo/返回.png" mode="widthFix" class="return-icon"></image>
      </view>
    </view>
    <view class="scenic-spot-container">
      <!-- 遍历景点数据，生成多个景点项 -->
      <div
          class="scenic-spot-item"
          v-for="(spot, index) in scenicSpots"
          :key="index"
      >
        <!-- 景点图片区域 -->
        <div class="scenic-spot-image">
          <img :src="spot.image" alt="景区图片" mode="widthFix"/>
        </div>

        <!-- 景点信息区域 -->
        <div class="scenic-spot-info">
          <!-- 景点名称 -->
          <p class="scenic-spot-name">{{ spot.name }}</p>

          <!-- 价格和购票按钮区域 -->
          <view class="price-and-btn">
            <!-- 价格 -->
            <view class="scenic-spot-price">￥{{ spot.price }}</view>
            <!-- 购票按钮 -->
            <view class="scenic-spot-ticket-btn">{{ spot.ticketText }}</view>
          </view>
        </div>
      </div>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scenicSpots: [
        {
          name: '青城山后山成人票',
          image: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E8%B4%AD%E7%A5%A8/%E9%9D%92%E5%9F%8E%E5%B1%B1%E5%90%8E%E5%B1%B13.jpg',
          price: '20',
          ticketText: '立即购买'
        },
        {
          name: '青城后山学生票',
          image: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E8%B4%AD%E7%A5%A8/%E9%9D%92%E5%9F%8E%E5%B1%B1%E5%90%8E%E5%B1%B11.jpg',
          price: '10',
          ticketText: '立即购买'
        }
      ]
    };
  },

  methods: {
    goToHome() {
      uni.redirectTo({
        url: '/pages/ticketing/ticketing'
      });
    }
  }
}
</script>

<style lang="scss">
.header-container {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #f0f8ff;
  padding: 0 15px;
  box-sizing: border-box;
}

.return-btn {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.return-icon {
  width: 100%;
  height: 100%;
}

.title {
  margin-left: 15px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.scenic-spot-container {
  background-color: #f0f8ff;
  padding: 20px;
}

.scenic-spot-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  overflow: hidden;
  gap: 20rpx;
}

.scenic-spot-image {
  width: 40%;
  height: 100%;
  overflow: hidden;
  img {
    width: 100%;
  }
}

.scenic-spot-info {
  flex: 1;
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
}

.scenic-spot-name {
  font-size: 34rpx;
  font-family: '黑体';
  font-weight: bolder;
  margin-bottom: 15px;
}

.price-and-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.scenic-spot-price {
  font-size: 36rpx;
  color: #ff6b81;
  font-weight: bold;
}

.scenic-spot-ticket-btn {
  background-color: #6ab04c;
  color: white;
  padding: 8px 15px;
  font-size: 16px;
  border-radius: 20px;
  cursor: pointer;
}
</style>
